{# Наследование от базового шаблона #}
{% extends 'base.html' %}

{# Мета-теги для SEO #}
{% block title %}Регистрация - Корочки.есть{% endblock %}
{% block description %}Создайте аккаунт для доступа к онлайн курсам{% endblock %}
{% block keywords %}регистрация, аккаунт, запись на курсы{% endblock %}

{% block content %}
{# Контейнер для формы регистрации #}
<div class="auth-form-container">
    {# Заголовок формы #}
    <h2 class="auth-form-title">Создайте аккаунт</h2>
    <p class="auth-form-text">Заполните форму для регистрации</p>
    
    {# Форма регистрации пользователя #}
    <form method="post">
        {# Защита от CSRF атак #}
        {% csrf_token %}
        
        {# Цикл по всем полям формы #}
        {% for field in form %}
        <div class="mb-3">
            {# Метка поля формы #}
            <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
            {# Поле формы #}
            {{ field }}
            {# Подсказка для поля #}
            {% if field.help_text %}
                <div class="form-text">{{ field.help_text }}</div>
            {% endif %}
            {# Ошибки валидации поля #}
            {% if field.errors %}
                <div class="text-danger small">
                    {% for error in field.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        {% endfor %}
        
        {# Кнопка отправки формы #}
        <button type="submit" class="btn btn-primary w-100 mb-3">Создать аккаунт</button>
    </form>
    
    {# Ссылка на страницу входа #}
    <div class="text-center">
        <p class="mb-0">Уже есть аккаунт? <a href="{% url 'login' %}" class="auth-link">Войти</a></p>
    </div>
</div>

{# JavaScript для маски ввода телефона #}
<script>
// Функция для применения маски телефона
function applyPhoneMask(inputElement, format) {
    // Ограничения на клавиши — разрешаем цифры и управляющие клавиши
    inputElement.addEventListener('keydown', function(e) {
        const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Insert'];
        const isDigit = /^[0-9]$/.test(e.key);
        if (!isDigit && !allowedKeys.includes(e.key) && e.key !== '+') {
            e.preventDefault();
        }
    });

    // Форматируем только на blur, чтобы не мешать вводу пользователя
    inputElement.addEventListener('blur', function(e) {
        const original = e.target.value;
        if (format === '8') {
            let digits = original.replace(/\D/g, '');
            if (!digits) { e.target.value = ''; return; }
            if (digits[0] !== '8') digits = '8' + digits;
            const national = digits.substring(1, 11);
            let out = '8(' + national.substring(0,3);
            if (national.length >= 3) out += ')' + national.substring(3,6);
            if (national.length >= 6) out += '-' + national.substring(6,8);
            if (national.length >= 8) out += '-' + national.substring(8,10);
            e.target.value = out;
            return;
        }

        // +7: нормализуем при потере фокуса
        let digits = original.replace(/\D/g, '');
        if (digits.startsWith('8')) digits = '7' + digits.substring(1);
        if (digits.startsWith('7') && digits.length >= 11) {
            const national = digits.substring(1, 11);
            const out = '+7 (' + national.substring(0,3) + ') ' + national.substring(3,6) + '-' + national.substring(6,8) + '-' + national.substring(8,10);
            e.target.value = out;
        }
    });

        // На фокусе автоматически подставляем префикс +7 для удобства ввода
        inputElement.addEventListener('focus', function(e) {
            if (format === '+7') {
                const v = e.target.value || '';
                if (!v.startsWith('+7')) {
                    e.target.value = '+7 ' + v.replace(/^\+?7?\s*/, '');
                }
            }
        });

        // Во время ввода: форматируем номер по мере набора для +7 и 8
        inputElement.addEventListener('input', function(e) {
            const el = e.target;
            // получаем только цифры
            let digits = el.value.replace(/\D/g, '');

            if (format === '+7') {
                // если ввели 8 в начале — считаем как 7
                if (digits.startsWith('8')) digits = '7' + digits.substring(1);
                // национальная часть (без ведущей 7)
                let national = digits.startsWith('7') ? digits.substring(1) : digits;
                const displayNational = national.substring(0, 10);

                let formatted = '+7';
                if (displayNational.length > 0) formatted += ' (' + displayNational.substring(0, Math.min(3, displayNational.length));
                if (displayNational.length >= 3) formatted += ') ' + displayNational.substring(3, Math.min(6, displayNational.length));
                if (displayNational.length >= 6) formatted += '-' + displayNational.substring(6, Math.min(8, displayNational.length));
                if (displayNational.length >= 8) formatted += '-' + displayNational.substring(8, Math.min(10, displayNational.length));

                el.value = formatted;
                return;
            }

            if (format === '8') {
                // Гарантируем, что начинается с 8
                if (!digits.startsWith('8')) digits = '8' + digits;
                // национальная часть после 8
                const national = digits.substring(1);
                const displayNational = national.substring(0, 10);

                let formatted = '8';
                if (displayNational.length > 0) formatted += '(' + displayNational.substring(0, Math.min(3, displayNational.length));
                if (displayNational.length >= 3) formatted += ')' + displayNational.substring(3, Math.min(6, displayNational.length));
                if (displayNational.length >= 6) formatted += '-' + displayNational.substring(6, Math.min(8, displayNational.length));
                if (displayNational.length >= 8) formatted += '-' + displayNational.substring(8, Math.min(10, displayNational.length));

                el.value = formatted;
                return;
            }
        });
}

// Применяем маску для телефона (по умолчанию формат '8')
const phoneInput = document.getElementById('phone-input');
applyPhoneMask(phoneInput, '+7'); // -------------------------------------------------------------------------------
</script>
{% endblock %}